import { Flex } from '@aws-amplify/ui-react';
import { Example, ExampleCode } from '@/components/Example';
import { ThemeAlert } from '@/components/ThemeAlert';

import { BasicExample, CustomThemeExample } from './examples';

<ThemeAlert />

## Usage

Import the `ThemeProvider` and wrap your application with it:

```jsx
import { ThemeProvider } from '@aws-amplify/ui-react';

export const App = () => (
  <ThemeProvider>
    <YourApplication />
  </ThemeProvider>
);
```

After wrapping your application in the `ThemeProvider`, you have access to all theme values in your components. To style the components in your app, you can either:
1. Get the theme `tokens` through the `useTheme` hook (e.g., `tokens.colors.blue[80]`)
2. Reference the theme `tokens` directly in style props (e.g., `"purple.80"`)

<Example>
  <Flex>
    <BasicExample />
  </Flex>

  <ExampleCode>
    ```tsx file=./examples/BasicExample.tsx
    ```
    
  </ExampleCode>
</Example>

### theme

To create and use your own custom theme, you may pass a [theme object](https://ui.docs.amplify.aws/react/theming#theme-object) to the `theme` prop on the `ThemeProvider`. 

- [Theming overview](/theming)

<Example>
  <CustomThemeExample />

  <ExampleCode>
    ```tsx file=./examples/CustomThemeExample.tsx
    ```
    
  </ExampleCode>
</Example>

### colorMode

The `ThemeProvider` accepts a `colorMode` prop which can be `light`, `dark`, or `system`.

See the [Dark mode documentation](./dark-mode) for a detailed explanation of how to use the `colorMode` prop. 

### nonce

When you have a `Content-Security-Policy` ([CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)) header defined, the browser will automatically block inline styles. 

To safely allow inline styles when using strict CSP rules, you may pass a [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) to the `nonce` prop on the `ThemeProvider`. This will add a nonce to the `<style>` tag rendered by the `ThemeProvider`. For example:

**CSP rules**
```
style-src css-cdn.example.com 'nonce-rAnd0m';
```

**ThemeProvider**
```jsx
<ThemeProvider nonce="rAnd0m">
  {/* your app */}
</ThemeProvider>
```

**HTML output**
```html
<style nonce="rAnd0m">
  :root, [data-amplify-theme] {
    --amplify-colors-white: hsl(0, 0%, 100%);
    /* etc */
  }
  /* 
   * Any of your custom theme styles
   */
</style>
```

For more information, see the following documention on [allowing inline styles using a nonce](https://content-security-policy.com/examples/allow-inline-style/).